export const addColumnComponent = (editor) => {
  const { Components } = editor;

  Components.addType('news-column', {
    model: {
      defaults: {
        name: 'news-column',
        droppable: true,
        resizable: true, 
        attributes: { class: 'news-column','data-gjs-type':"news-column" },
        components: [
          {
            type: 'text',
            attributes: {
              class: 'news-title'
            },
            content: '标题'
          },
          {
            type: 'image',
            attributes: {
              src: 'https://picsum.photos/600/200',
              class: 'news-image'
            }
          },
          {
            type: 'text',
            attributes: {
              class: 'news-description'
            },
            content: '这是描述。'
          }
        ],
        styles: `
          .news-column {
            border: 1px solid #ddd;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            background-color: #fff;
          }
          .news-column:hover {
            
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
          }
          .news-title {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 10px;
            position: relative;
            padding-bottom: 10px;
            display: inline-block;
          }
          .news-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 4px;
            background-color: #2196F3;
            transition: width 0.3s ease;
          }
          .news-image {
            width: 100%;
            height: auto;
            max-width: 500px;
            margin: 20px auto;
            display: block;
          }
          .news-description {
            font-size: 16px;
            color: #555;
            line-height: 1.5;
          }
        `,
        script() {
        
        }
      }
    }
  });
  
  editor.BlockManager.add('news-column', {
    label: '栏目组件',
    category: '栏目类',
    content: { type: 'news-column' },
    media:`<svg xmlns="http://www.w3.org/2000/svg"  height="30" width="30" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M160-120q-33 0-56.5-23.5T80-200v-640l67 67 66-67 67 67 67-67 66 67 67-67 67 67 66-67 67 67 67-67 66 67 67-67v640q0 33-23.5 56.5T800-120H160Zm0-80h280v-240H160v240Zm360 0h280v-80H520v80Zm0-160h280v-80H520v80ZM160-520h640v-120H160v120Z"/></svg>`
   
  });
};
